<template>
  <div class="oe-batch-list" v-loading="loading">
    <info-top @toggleCollapsed="toggleCollapsed"></info-top>
    <div class="oe-batch-table">
      <div class="search-bar">
        <div class="batch-title">
          {{ batch_title }}
        </div>
        <div class="search-ipt">
          <a-input-search v-model="title" placeholder="输入批次名称" enter-button="查询" size="large" @search="getList" class="ipt">
            <template #prefix>
             <span
                class="iconfont icon-sousuo"
              ></span>
               </template
          >
          </a-input-search>
        </div>
      </div>
      <div class="oe-examlist-table" style="margin-top: 20px">
        <a-table :columns="columns" :dataSource="list" :pagination="pagination" @change="onTableChange" :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"> 
          <div slot="operation" slot-scope="text, record" class="opt">
            <!-- <a-tooltip placement="bottom">
              <template slot="title">
                <span>进入</span>
              </template>
              <span
                class="iconfont icon-jinru"
                style="font-size: 20px; color: #1e8dfd"
                @click.stop="getExam(record.Id)"
              ></span>
            </a-tooltip> -->
             <div class="operation-btn"  @click.stop="getExam(record.Id)">
               <span
                class="iconfont icon-jinru"
                style="font-size: 20px; color: #1e8dfd"
              ></span>
              <span class="enter">进入</span>
             </div>
          </div>
        </a-table>
      </div>
    </div>
  </div>
</template>

<script>
import infoTop from '@/components/info-top/index.vue';
export default {
  components: {
    infoTop,
  },
  data() {
    return {
      list: [],
      title: '',
      pagination: {
        pageSizeOptions: ['10', '20', '50', '100', '1000'],
        showSizeChanger: true,
        showTotal(total) {
          return `共 ${total} 条`;
        },
        onShowSizeChange: (current, pageSize) => {
          this.pagination.current = current;
          this.pagination.pageSize = pageSize;
          this.$nextTick(() => {
            this.getList();
          });
        },
        onChange: (current, pageSize) => {
          // this.getList(current, pageSize);
          this.pagination.current = current;
          this.pagination.pageSize = pageSize;
          this.$nextTick(() => {
            this.getList();
          });
        },
        buildOptionText(props) {
          // console.log(props);
          return props.value + '条/页';
        },
        current: 1,
        pageSize: 10,
        total: 0,
      },
      // 表标题
      columns: [
        {
          title: '序号',
          dataIndex: 'Number',
          key: 'Number',
        },
        {
          title: '批次名称',
          dataIndex: 'Title',
          key: 'Title',
        },
        {
          title: '创建时间',
          dataIndex: 'DateCreated',
          key: 'DateCreated',
        },
        {
          title: '操作',
          dataIndex: 'operation',
          key: 'operation',
          scopedSlots: { customRender: 'operation' },
        },
      ],
      loading: false,
      batch_title: '',
      selectedRowKeys:[],
    };
  },
  created() {
    this.batch_title = JSON.parse(localStorage.getItem('sortItem')).Title;
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      this.$http
        .post('/api/study/batch/getList', {
          title: this.title,
          page: this.pagination.current || 1,
          pageSize: this.pagination.pageSize || 10,
        })
        .then((rst) => {
          this.loading = false;
          if (rst.code > 0) {
            this.list = [];
            this.pagination.current = rst.pagination.pageIndex;
            this.pagination.pageSize = rst.pagination.pageSize;
            this.pagination.total = rst.pagination.totalCount;
            if (rst.list.length) {
              rst.list.forEach((item, index) => {
                let number = (rst.pagination.pageIndex - 1) * rst.pagination.pageSize + index + 1;
                this.list.push({
                  ...item,
                  Number: number,
                });
              });
            }
          } else {
            this.$message.error(rst.msg);
          }
        });
    },
    getExam(Id) {
      localStorage.setItem('bacthId', Id);
      this.$router.push({
        name: 'current',
      });
    },
    onSelectChange(selectedRowKeys){
      console.log('selectedRowKeys changed: ', selectedRowKeys);
      this.selectedRowKeys=selectedRowKeys
    }
  },
};
</script>

<style lang="scss" scoped>
@import './style/index.scss';
</style>